import type { ColProps } from "element-plus";
import type { Select, Input, InputNumber } from "./components/types";
export interface CLFormActions {
  /** 传入表单属性，进行初始化 */
  init: (props: CLFormProps) => void;
  /** 读取model */
  getValue: () => Recordable;
  /** 写入model */
  setValue: (newValue: Recordable) => void;
}

export type ComponentType = "Input" | "InputNumber" | "Select";

export interface FormColumn<T extends ComponentType = ComponentType> {
  /** 字段属性名 */
  prop: string;
  /** 组件名 */
  component: T;
  /** 子组件的属性 （使用条件类型，获取更好的编译提示）*/
  componentProps?: T extends "Select"
    ? Select
    : T extends "Input"
    ? Input
    : T extends "InputNumber"
    ? InputNumber
    : never;
  /** 标签名 */
  ariaLabel?: string;
  /** el-col 属性，span最大为24 */
  /** 默认值 */
  defaultValue?: T extends "Input"
    ? string
    : T extends "InputNumber"
    ? number
    : any;
  colProps?: Partial<ColProps>;
}

export interface CLFormProps {
  /** form-item 的信息对象集合 */
  formColumns: FormColumn[];
  /** 组件之间的间隔 */
  gutter?: number;
}

export interface ClFormModel {
  getFormColumns: ComputedRef<FormColumn[]>;
  getGutter: ComputedRef<number>;
  setProps: (newProps: CLFormProps) => void;
}
